import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs } from 'antd';
import { Dispatch, AnyAction } from 'redux';
import styles from './index.css';
// import DevicePermissionManage from './deviceManage'
import { UserManage, RoleManage, DictManage, DeptManage, MenuManage } from './components';
const { TabPane } = Tabs;
import { isMenuVisible } from './../../utils/utils';
interface ManageProps {
  dispatch: Dispatch<AnyAction>;
}
// @connect(({ systemDevice }: ConnectState) => ({
//   systemActiveTab: systemDevice.systemActiveTab,
// }))
class DeviceManage extends Component<ManageProps> {
  // constructor(props: DeviceProps) {
  //   super(props);
  // }
  state = {
    tabArr: [
      { idx: '0', menuId: 'system:user:view', type: 'system/userManage' },
      { idx: '1', menuId: 'system:role:view', type: 'system/roleManage' },
      { idx: '2', menuId: 'system:dict:view', type: 'system/dictManage' },
      { idx: '3', menuId: 'system:dept:view', type: 'system/deptManage' },
      { idx: '4', menuId: 'system:menu:view', type: 'system/menuManage' },
    ],
    activeTabArr: [],
    activeIdx: '0',
    isUpdate: '',
  };
  handleTabChange = (_idx: string) => {
    localStorage.removeItem('dictManagePage');
    localStorage.removeItem('userManagePage');
    const { dispatch } = this.props;
    localStorage.setItem('systemMenu', _idx);
    localStorage.setItem('rolePageNum', '1');
    this.setState({ activeIdx: _idx, isUpdate: new Date().getTime() });
    setTimeout(() => {
      console.log(11111,this.state.activeIdx);
    },0)
  };
  componentWillMount() {
    // 
    const { dispatch } = this.props;
    let arr = [];
    this.state.tabArr.forEach((e: any) => {
      if (isMenuVisible(e.menuId)) {
        arr.push(e);
      }
    });
    this.setState({ activeTabArr: arr }, () => {
      this.setState({
        activeIdx: localStorage.getItem('systemMenu')
          ? localStorage.getItem('systemMenu')
          : this.state.activeTabArr.length && this.state.activeTabArr[0].idx,
      });
      setTimeout(() => {
        console.log(this.state.activeIdx);
      },0)
    });
  }
  render() {
    return (
      <div className={styles.container}>
        <Tabs onChange={this.handleTabChange} type="card" activeKey={this.state.activeIdx}>
          {isMenuVisible('system:user:view') && (
            <TabPane tab="用户管理" key="0">
              <UserManage isUpdate={this.state.isUpdate}/>
            </TabPane>
          )}
          {isMenuVisible('system:role:view') && (
            <TabPane tab="角色管理" key="1">
              <RoleManage isUpdate={this.state.isUpdate} />
            </TabPane>
          )}
          {isMenuVisible('system:dict:view') && (
            <TabPane tab="字典管理" key="2">
              <DictManage isUpdate={this.state.isUpdate} />
            </TabPane>
          )}
          {isMenuVisible('system:dept:view') && (
            <TabPane tab="部门管理" key="3">
              <DeptManage />
            </TabPane>
          )}
          {isMenuVisible('system:menu:view') && (
            <TabPane tab="菜单管理" key="4">
              <MenuManage />
            </TabPane>
          )}
        </Tabs>
      </div>
    );
  }
}

export default connect(({ loading, systemDevice }: any) => ({
  loading: loading.effects['systemDevice/setActiveTab'],
  // systemDevice: systemDevice.applyDeviceLists,
  activeTab: systemDevice.activeTab,
}))(DeviceManage);
